{# 先声明继承原生模板 #}
{% load i18n admin_urls static admin_modify %}
<style>
/* 基础样式：覆盖默认form-row */
{#.form-row {#}
{#   align-items:start;#}
    {#display: '123';#}
{#}#}
.inline-deletelink {
    /*! float: right; */
    text-indent: -9999px;
    background: url("{% static 'admin/img/inline-delete.svg' %}") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    border: 0px none;
}
/* 总金额行样式优化 */
.total-row {
    background: #f0f0f0;
    font-weight: bold;
}
</style>
<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="tabular"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
  <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
{{ inline_admin_formset.formset.management_form }}
<fieldset class="module {{ inline_admin_formset.classes }}">
   {% if inline_admin_formset.formset.max_num == 1 %}
     <h2>{{ inline_admin_formset.opts.verbose_name|capfirst }}</h2>
   {% else %}
     <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
   {% endif %}
   {{ inline_admin_formset.formset.non_form_errors }}
   <table>
     <thead><tr>
       <th class="original"></th>
     {% for field in inline_admin_formset.fields %}
       <th class="column-{{ field.name }}{% if field.required %} required{% endif %}{% if field.widget.is_hidden %} hidden{% endif %}">{{ field.label|capfirst }}
       {% if field.help_text %}<img src="{% static "admin/img/icon-unknown.svg" %}" class="help help-tooltip" width="10" height="10" alt="({{ field.help_text|striptags }})" title="{{ field.help_text|striptags }}">{% endif %}
       </th>
     {% endfor %}
     {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}<th>{% translate "Delete?" %}</th>{% endif %}
     </tr></thead>

     <tbody id="inline-related-tbody">
     {% for inline_admin_form in inline_admin_formset %}
        {% if inline_admin_form.form.non_field_errors %}
        <tr class="row-form-errors"><td colspan="{{ inline_admin_form|cell_count }}">
            {{ inline_admin_form.form.non_field_errors }}</td></tr>
        {% endif %}
       <tr class="form-row {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form{% endif %}"
             id="{{ inline_admin_formset.formset.prefix }}-{% if forloop.last and inline_admin_formset.has_add_permission %}empty{% else %}{{ forloop.counter0 }}{% endif %}" >
        <td class="original">
          {% if inline_admin_form.original or inline_admin_form.show_url %}<p>
          {% if inline_admin_form.original %}
          {{ inline_admin_form.original }}
          {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }}">{% if inline_admin_formset.has_change_permission %}{% translate "Change" %}{% else %}{% translate "View" %}{% endif %}</a>{% endif %}
          {% endif %}
          {% if inline_admin_form.show_url %}<a href="{{ inline_admin_form.absolute_url }}">{% translate "View on site" %}</a>{% endif %}
            </p>{% endif %}
          {% if inline_admin_form.needs_explicit_pk_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
          {% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
        </td>
        {% for fieldset in inline_admin_form %}
          {% for line in fieldset %}
            {% for field in line %}
              <td class="{% if field.field.name %}field-{{ field.field.name }}{% endif %}{% if field.field.is_hidden %} hidden{% endif %}">
              {% if field.is_readonly %}
                  <p>{{ field.contents }}</p>
              {% else %}
                  {{ field.field.errors.as_ul }}
                  {{ field.field }}
              {% endif %}
              </td>
            {% endfor %}
          {% endfor %}
        {% endfor %}
        {% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
          <td class="delete">{% if inline_admin_form.original %}{{ inline_admin_form.deletion_field.field }}{% endif %}</td>
        {% endif %}
        </tr>
     {% endfor %}

     <!-- 新增：显示总金额 -->
         <!-- 总金额行：修正列数对齐 -->
          <tr class="total-row">
            {% comment %}
              计算空出的列数：
              - 1列（original列） + 字段列数 + （删除列1或0） - 2（总金额占用的列数）
            {% endcomment %}
            {% with field_count=inline_admin_formset.fields|length %}
              {% with delete_col=inline_admin_formset.formset.can_delete|yesno:"1,0" %}
                {% with empty_cols=1|add:field_count|add:delete_col|add:"-2" %}
                  <td colspan="{{ empty_cols }}"></td>  <!-- 空出前面的列 -->
                {% endwith %}
              {% endwith %}
            {% endwith %}
            <td><strong>总金额：</strong></td>
            <td><span id="total-amount" style="font-weight:bold;">0.00</span> 元</td>
          </tr>

     </tbody>

   </table>

</fieldset>
  </div>

</div>
</div>


<script>
    // 页面初始加载完成后执行（核心入口）
document.addEventListener('DOMContentLoaded', () => {
    console.log('chushi')
  // 1. 初始化已有行的计算事件
  initExistingRows();
    // 2. 监听新增行事件
    watchForNewRows();
  {#// 2. 计算初始总金额（基于已有行数据）#}
  {#calculateTotal();#}
});
// 初始化已有行：为所有非空明细行绑定计算事件
function initExistingRows() {
  // 获取所有非空行（排除空表单模板行）
  const existingRows = document.querySelectorAll(`.form-row:not(.empty-form)`);

  if (existingRows.length === 0) {
    console.log('没有找1到已存在的明细行');
    return;
  }

  // 为每一行绑定事件
  existingRows.forEach(row => {
           // 1. 获取当前行的id（Django生成的行id格式：{prefix}-{index}，如 storerawdetailmodel_set-1）

        const rowId = row.id;
      if (!rowId) {
        console.warn('当前行缺少id，无法提取索引');
        return;
      }else {


          // 2. 从行id中提取前缀和索引（正则匹配）
          // 正则说明：匹配"{prefix}-{index}"格式，提取前缀和索引
          const rowIdMatch = rowId.match(/(.+)-(\d+)/);
          if (!rowIdMatch) {
              console.warn('行id格式不符合预期：', rowId);
              return;
          }
          const prefix = rowIdMatch[1]; // 行前缀（如 store_raw_detail）
          const rowIndex = rowIdMatch[2]; // 行索引（如 0）
          console.log('meiyihang');

          bindRowEvents(row, prefix, rowIndex);
          // 额外检查：如果行已有数据，触发一次计算（确保金额正确）
          triggerInitialCalculation(row, prefix, rowIndex);
      }
  });
}
// 触发行的初始计算（针对已有数据的行）
function triggerInitialCalculation(row,prefix,rowIndex) {

    // 3. 构建store-num输入框的id（Django规则：id_{prefix}-{index}-store_num）
  const storeNumId = `id_${prefix}-${rowIndex}-store_num`;

  // 4. 根据id查找store-num输入框
  const storeNumInput = document.getElementById(storeNumId);
  if (!storeNumInput) {
    console.warn('未找到store-num输入框，id：', storeNumId);
    return;
  }
    // 5. 找到单价输入框（用于判断是否需要触发计算）
  const priceId = `id_${prefix}-${rowIndex}-price`;
  const priceInput = document.getElementById(priceId);
  if (!priceInput) {
    console.warn('未找到单价输入框，id：', priceId);
    return;
  }
   // 6. 如果行已有数据，触发一次计算
  if (storeNumInput.value.trim() || priceInput.value.trim()) {
    const event = new Event('input', { bubbles: true });
    storeNumInput.dispatchEvent(event); // 触发输入事件，计算金额
  }
  console.log('meiyihangshuju',storeNumInput.value);

}
// 绑定单行的计算事件（数量、单价、金额联动）
function bindRowEvents(row,prefix,rowIndex) {
     // 3. 构建store-num输入框的id（Django规则：id_{prefix}-{index}-store_num）
  const storeNumId = `id_${prefix}-${rowIndex}-store_num`;

  // 4. 根据id查找store-num输入框
  const storeNumInput = document.getElementById(storeNumId);
  if (!storeNumInput) {
    console.warn('未找到store-num输入框，id：', storeNumId);
    return;
  }
    // 5. 找到单价输入框（用于判断是否需要触发计算）
  const priceId = `id_${prefix}-${rowIndex}-price`;
  const priceInput = document.getElementById(priceId);
  if (!priceInput) {
    console.warn('未找到单价输入框，id：', priceId);
    return;
  }
   // 5. 找到单价输入框（用于判断是否需要触发计算）
  const amountId = `id_${prefix}-${rowIndex}-amount`;
  const amountInput = document.getElementById(amountId);
  if (!amountInput) {
    console.warn('未找到金额输入框，id：', amountId);
    return;
  }

  // 输入事件处理函数
  const handleInput = (e) => {
    const storeNum = parseFloat(storeNumInput.value) || 0;
    const price = parseFloat(priceInput.value) || 0;
    let amount = parseFloat(amountInput.value) || 0;

    // 根据输入源计算：数量/单价 → 金额；数量/金额 → 单价
    if (e.target === storeNumInput || e.target === priceInput) {
      amount = storeNum * price;
      amountInput.value = amount.toFixed(2);
    } else if (e.target === amountInput && storeNum > 0) {
      priceInput.value = (amount / storeNum).toFixed(13);
    }

    // 重新计算总金额
    calculateTotal();
  };

  // 绑定输入事件
  storeNumInput.addEventListener('input', handleInput);
  priceInput.addEventListener('input', handleInput);
  amountInput.addEventListener('input', handleInput);
}

// 计算总金额
function calculateTotal() {
  let total = 0;
  // 遍历所有非空行的金额输入框
  document.querySelectorAll(`.form-row:not(.empty-form) .amount-input`).forEach(input => {
    const amount = parseFloat(input.value) || 0;
    total += amount;
  });
  // 更新总金额显示（保留两位小数）
  document.getElementById("total-amount").textContent = total.toFixed(2);
}
// 监听新增行（通过DOM变化）
function watchForNewRows() {
    const tbody = document.getElementById('inline-related-tbody');
    if (!tbody) return;

    // 创建DOM变化观察器
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // 检查新增的节点是否是表格行
            mutation.addedNodes.forEach(node => {
                // 只处理tr元素，且是form-row，且不是空表单/错误行
                if (node.tagName === 'TR' &&
                    node.classList.contains('form-row') &&
                    !node.classList.contains('empty-form') &&
                    !node.classList.contains('row-form-errors')) {
                    console.log('检测到新增行，绑定计算事件');

                      const rowId = node.id;
                      if (!rowId) {
                        console.warn('当前行缺少id，无法提取索引');
                        return;
                      }else {


                          // 2. 从行id中提取前缀和索引（正则匹配）
                          // 正则说明：匹配"{prefix}-{index}"格式，提取前缀和索引
                          const rowIdMatch = rowId.match(/(.+)-(\d+)/);
                          if (!rowIdMatch) {
                              console.warn('行id格式不符合预期：', rowId);
                              return;
                          }
                          const prefix = rowIdMatch[1]; // 行前缀（如 store_raw_detail）
                          const rowIndex = rowIdMatch[2]; // 行索引（如 0）
                          console.log('meiyihang');

                          bindRowEvents(node, prefix, rowIndex);
                          // 额外检查：如果行已有数据，触发一次计算（确保金额正确）
                          triggerInitialCalculation(node, prefix, rowIndex);
                      }
                                }
            });
        });
    });

    // 配置观察器：监听子节点变化
    observer.observe(tbody, {
        childList: true,
        subtree: false
    });
}
</script>